<style lang="less" scoped>
  a{
    text-decoration: none;
    color: white;
  }
  .dn{
    display: none;
  }

  img{
    //width: 100%;
    margin-top: 20%;
  }
  section{
    height: 100%;
    text-align: center;
    background-color: #000;
    color:white;

    .mt-version{
      margin-right: -10rem;
      margin-bottom: 1rem;
      width:100%;
    }

    &>div{
      height: 100%;
    }

    .create{
      display: block;
      margin:1rem 0;
      &:hover{
        text-decoration: underline;
      }
    }

    .open{
      cursor: pointer;
      &:hover{
        text-decoration: underline;
      }
      span{
        color:red;
        position: absolute;
      }
    }
  }
</style>
<template>
  <section>
    <div>
      <img src=""/>
      <p class="mt-version">MT·Version 2017</p>

      <!--loading-->
      <v-load v-if="!allready"></v-load>

      <!--业务-->
      <div v-if="allready">
         <router-link  to="/guide" class="create">创建项目</router-link >
         <div class="open" @click="openProject">
            打开项目
            <span v-show="isShow">请选择.streme后缀文件</span>
         </div>
         <input type="file" class="dn" id="file" @change="fileChange"/>
      </div>
     
    </div>
  </section>
</template>

<script>

//import EventBus from 'electron-eventbus'
import vLoad from './Loading'

export default{
  name: 'index',
  data () {
    return {
      isShow : false,
      allready : false
    }
  },
  components: {
    vLoad
  },
  methods: {
    openProject(){
      var fileNode = document.getElementById("file");
      fileNode.click();
    },
    fileChange(){
      var fileNode = document.getElementById("file"),
          fileName = fileNode.files[0].name,
          filePath = fileNode.value;
      var suffix = fileNode.files[0].name.slice(-6).toLowerCase(); 
      
      if(suffix === "xtreme") {
        // 后缀名称正确, 发送给进程!!
        // const XtremeEventBus = new EventBus();

        // XtremeEventBus.broadcast('event',{
        //   path:filePath,
        //   from: 'open'
        // })
      }else{
        // 后缀名称错误 
        this.isShow = true;
      }

    },
    showOpr(){
      this.allready = true;
    }
  },
  mounted () {
    setTimeout(()=>{
      this.showOpr();
    },3 * 1000)
  }
}

</script>